<script setup>
import { Page } from '@vben/common-ui';
import { updatePreferences } from '@vben/preferences';
import { computed, nextTick, onMounted, onUnmounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@vben/stores';
import { requestClient } from '#/api/request.js';
import { Col, Row, Select } from 'ant-design-vue';
import useDraw from '../useDraw.js';
import centerOne from './components/centerOne.vue';
import centerTwo from './components/centerTwo.vue';
import leftOne from './components/leftOne.vue';
import leftThree from './components/leftThree.vue';
import leftTwo from './components/leftTwo.vue';
import rightOne from './components/rightOne.vue';
import rightTwo from './components/rightTwo.vue';

const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw();
const router = useRouter();
const userStore = useUserStore();

// 判断是否是管理员
const isAdmin = computed(() => {
  return userStore.$state.userRoles?.some(role => role === 'superadmin');
});
// 企业列表
let userList = ref([])
// 接口加载状态
let loading = ref(false)
// 企业ID
let enterpriseId = ref(null)
// 组织列表
let orgList = ref([])
// 标题
let title = ref('京彩E家人客户端数据统计')
// 入会年份统计组织
let membershipYearOrgId = ref(0)
// 入会年份统计数据
let membershipYearOata = ref({
  xData: [],
  seriesData: []
})
// 教育水平统计组织
let educationalLevelOrgId = ref(0)
// 教育水平统计数据
let educationalLevelData = ref({
  xData: [],
  seriesData: []
})
// 兴趣爱好统计组织
let hobbiesAllKindsOrgId = ref(0)
// 兴趣爱好统计数据
let hobbiesAllKindsData = ref({
  indicators: [
    { name: '阅读', max: 100 },
    { name: '运动', max: 100 },
    { name: '音乐', max: 100 },
    { name: '旅游', max: 100 },
    { name: '其他', max: 100 },
  ],
  series: [
    {
      type: 'radar',
      data: [
        { value: [0, 0, 0, 0, 0], name: '爱好分布' },
      ],
    },
  ],
})
// 点击量统计组织
let clickVolumeOrgId = ref(0)
// 点击量统计数据
let clickVolumeData = ref({
  xData: [],
  seriesData: [],
});
// 组织开展活动组织
let organizeActivitiesOrgId = ref(0)
// 组织开展活动数据
let organizeActivitiesData = ref({})
// 平台活动数据
let platformActivitiesData = ref({})
// 政治面貌统计组织
let politicalStatusOrgId = ref(0)
// 政治面貌统计数据
let politicalStatusData = ref([])
// 年龄区间性别统计组织
let ageRangeOrgId = ref(0)
// 年龄区间性别统计数据
let ageRangeData = ref({
  xData: [],
  maleData: [],
  femaleData: [],
  unknownData: [],
});
let setTimeOutTimer = ref(86400000)

// 定时器句柄
const timerHandles = {
  membershipYear: null,
  educationalLevel: null,
  hobbiesAllKinds: null,
  clickVolume: null,
  organizeActivities: null,
  platformActivities: null,
  politicalStatus: null,
  ageRange: null,
};
// 清除所有定时器
function clearAllTimers() {
  Object.keys(timerHandles).forEach(key => {
    if (timerHandles[key]) {
      clearTimeout(timerHandles[key]);
      timerHandles[key] = null;
    }
  });
}
// 启动指定接口的定时器
function startTimer(key, fn) {
  if (timerHandles[key]) clearTimeout(timerHandles[key]);
  timerHandles[key] = setTimeout(() => {
    fn();
    startTimer(key, fn); // 递归定时
  }, setTimeOutTimer.value);
}

// 接口区域
// 获取年龄区间性别统计数据
const getAgeRangeData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/ageSexStatistics' + '/' + ageRangeOrgId.value, { params })
  ageRangeData.value = {
    xData: res.age,
    maleData: res.maleData,
    femaleData: res.femaleData,
    unknownData: res.unknownData,
  };
}
// 获取政治面貌统计数据
const getPoliticalStatusData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/politicalOutlookStatistics' + '/' + politicalStatusOrgId.value, { params })
  politicalStatusData.value = res.data;
}
// 获取平台活动数据
const getPlatformActivities = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/activityPlatformStatistics', { params })
  platformActivitiesData.value = {
    header: ['活动主题', '活动时间', '活动类型', '参与人数', '活动成果'],
    data: res.data.map(item => [
      item.name.length > 9 ? item.name.slice(0, 9) + '...' : item.name,
      item.time,
      item.type,
      String(item.count),
      String(item.result)
    ])
  };
}
// 获取组织开展活动统计数据
const getOrganizeActivitiesData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/activityStatistics' + '/' + organizeActivitiesOrgId.value, { params })
  organizeActivitiesData.value = res
}
// 获取点击量统计数据
const getClickVolumeData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/clickStatistics' + '/' + clickVolumeOrgId.value, { params })
  clickVolumeData.value = {
    xData: res.xData,
    seriesData: res.seriesData,
  };
}
// 获取兴趣爱好统计数据
const getHobbiesAllKindsData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/hobbyStatistics' + '/' + hobbiesAllKindsOrgId.value, { params })
  const maxValue = Math.max(...res.max, 100);
  hobbiesAllKindsData.value = {
    indicators: res.name.map((name) => ({ name, max: maxValue })),
    series: [
      {
        type: 'radar',
        data: [{ value: res.max, name: '爱好分布' }],
      },
    ],
  };
}
// 获取教育水平统计数据
const getEducationalLevelData = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/educationLevelStatistics' + '/' + educationalLevelOrgId.value, { params })
  educationalLevelData.value = {
    xData: res.xdata,
    seriesData: res.seriesData,
  };
}
// 获取入会年份统计数据
const getMembershipYearOata = async () => {
  let params = {}
  // 如果是管理员且选择了企业，添加企业ID参数
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appB/joinYearStatistics' + '/' + membershipYearOrgId.value, { params })
  membershipYearOata.value = {
    xData: res.year,
    seriesData: res.seriesData,
  };
}
// 获取用户列表
const getUserList = async () => {
  const res = await requestClient.get('/system/user/list');
  userList.value = res.rows.filter((item) => item.userId !== 1);
};
// 获取组织列表
const getOrgList = async () => {
  let params = {};
  if (isAdmin.value && enterpriseId.value) {
    params.enterpriseId = enterpriseId.value;
  }
  const res = await requestClient.get('/appA/getOrgList', { params })
  orgList.value = [
    { value: 0, label: '全部' },
    ...res.orgList.map((org) => ({
      value: org.orgId,
      label: org.orgName,
    })),
  ];
}

// 事件
// 入会年份统计组织切换
const changeMembershipYearOrgId = () => {
  clearTimeout(timerHandles.membershipYear);
  getMembershipYearOata();
  startTimer('membershipYear', getMembershipYearOata);
}
// 教育水平统计组织切换
const changeEducationalLevelOrgId = () => {
  clearTimeout(timerHandles.educationalLevel);
  getEducationalLevelData();
  startTimer('educationalLevel', getEducationalLevelData);
}
// 兴趣爱好统计组织切换
const changeHobbiesAllKindsOrgId = () => {
  clearTimeout(timerHandles.hobbiesAllKinds);
  getHobbiesAllKindsData();
  startTimer('hobbiesAllKinds', getHobbiesAllKindsData);
}
// 点击量统计组织切换
const changeClickVolumeOrgId = () => {
  clearTimeout(timerHandles.clickVolume);
  getClickVolumeData();
  startTimer('clickVolume', getClickVolumeData);
};
// 组织开展活动组织切换
const changeOrganizeActivitiesOrgId = () => {
  clearTimeout(timerHandles.organizeActivities);
  getOrganizeActivitiesData();
  startTimer('organizeActivities', getOrganizeActivitiesData);
};
// 政治面貌统计组织切换
const changePoliticalStatusOrgId = () => {
  clearTimeout(timerHandles.politicalStatus);
  getPoliticalStatusData();
  startTimer('politicalStatus', getPoliticalStatusData);
};
// 年龄区间性别统计组织切换
const changeAgeRangeOrgId = () => {
  clearTimeout(timerHandles.ageRange);
  getAgeRangeData();
  startTimer('ageRange', getAgeRangeData);
};
// 是否获取企业列表
const isGetEnterpriseListHandler = async () => {
  if (isAdmin.value) {
    await getUserList();
    enterpriseId.value = userList?.value[0]?.enterpriseId;
  }
};
// 切换企业
const handleEnterpriseChange = async () => {
  await getOrgList();
  initAPI();
}
// 初始化页面调用接口
const initAPI = async () => {
  clearAllTimers();
  await Promise.all([
    getMembershipYearOata(),
    getEducationalLevelData(),
    getHobbiesAllKindsData(),
    getClickVolumeData(),
    getOrganizeActivitiesData(),
    getPlatformActivities(),
    getPoliticalStatusData(),
    getAgeRangeData(),
  ])
  startTimer('membershipYear', getMembershipYearOata);
  startTimer('educationalLevel', getEducationalLevelData);
  startTimer('hobbiesAllKinds', getHobbiesAllKindsData);
  startTimer('clickVolume', getClickVolumeData);
  startTimer('organizeActivities', getOrganizeActivitiesData);
  startTimer('platformActivities', getPlatformActivities);
  startTimer('politicalStatus', getPoliticalStatusData);
  startTimer('ageRange', getAgeRangeData);
}
// 初始化页面配置
const pageInitializeHandler = async () => {
  calcRate();
  windowDraw();
  window.addEventListener('keydown', handleEscKeydown);
  await updateScreenPreferences('full');
}
// 按esc键退出
const handleEscKeydown = (event) => {
  if (event.key === 'Escape') {
    router.back();
    updateScreenPreferences('default');
  }
}
// 页面配置方法
const updateScreenPreferences = async (mode) => {
  return updatePreferences({
    app: { layout: mode === 'full' ? 'full-content' : 'sidebar-nav' },
    header: { enable: mode !== 'full' },
    sidebar: { collapsed: mode === 'full' },
    tabbar: { enable: false },
  });
}

onMounted(async () => {
  loading.value = true
  await isGetEnterpriseListHandler()
  await getOrgList()
  await initAPI()
  nextTick(() => {
    if (appRef.value) {
      pageInitializeHandler()
    }
  });
  loading.value = false
})
// 页面卸载时清除所有定时器
onUnmounted(() => {
  clearAllTimers();
  window.removeEventListener('keydown', handleEscKeydown);
  // unWindowDraw();
});
</script>

<template>
  <Page :auto-content-height="true" class="map-container">
    <div id="map-box" ref="appRef">
      <div class="bg">
        <dv-loading v-if="loading">Loading...</dv-loading>
        <div v-else style="width: 100%; height: 100%">
          <div class="header">
            <div class="move-line"></div>
            <div class="header-title">{{ title }}</div>
            <img class="header-bg" src="../../../assets/header-04.png" />
            <div style="position: absolute;top: 2px;">
              <div class="scifi-select">
                <Select style="width: 120px;" v-if="isAdmin" v-model:value="enterpriseId" placeholder="请选择企业"
                  @change="handleEnterpriseChange" class="custom-select" dropdownClassName="scifi-select-dropdown">
                  <Select.Option v-for="org in userList" :key="org.userId" :value="org.enterpriseId">
                    {{ org.nickName }}
                  </Select.Option>
                </Select>
              </div>
            </div>
          </div>
          <Row :gutter="[10, 10]" style="height: calc(100% - 60px); padding: 20px 0 0">
            <Col :span="7">
            <dv-border-box-8 style="height: 32%">
              <div class="chart-header">
                <div>入会年份统计</div>
                <div class="scifi-select">
                  <Select style="width: 120px;" v-model:value="membershipYearOrgId" placeholder="请选择组织"
                    @change="changeMembershipYearOrgId" class="custom-select" dropdownClassName="scifi-select-dropdown">
                    <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                      {{ org.label }}
                    </Select.Option>
                  </Select>
                </div>
              </div>
              <leftOne :chart-data="membershipYearOata" />
            </dv-border-box-8>
            <dv-border-box-8 style="height: 33%; margin: 10px 0">
              <div class="chart-header">
                <div>教育水平统计</div>
                <div class="scifi-select">
                  <Select style="width: 120px;" v-model:value="educationalLevelOrgId" placeholder="请选择组织"
                    @change="changeEducationalLevelOrgId" class="custom-select"
                    dropdownClassName="scifi-select-dropdown">
                    <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                      {{ org.label }}
                    </Select.Option>
                  </Select>
                </div>
              </div>
              <leftTwo :chart-data="educationalLevelData" />
            </dv-border-box-8>
            <dv-border-box-8 style="height: 32%">
              <div class="chart-header">
                <div>各类爱好人数统计</div>
                <div class="scifi-select">
                  <Select style="width: 120px;" v-model:value="hobbiesAllKindsOrgId" placeholder="请选择组织"
                    @change="changeHobbiesAllKindsOrgId" class="custom-select"
                    dropdownClassName="scifi-select-dropdown">
                    <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                      {{ org.label }}
                    </Select.Option>
                  </Select>
                </div>
              </div>
              <leftThree :chart-data="hobbiesAllKindsData" />
            </dv-border-box-8>
            </Col>

            <Col :span="10">
            <dv-border-box-8 style="height: 66%">
              <div class="chart-header">
                <div>点击量</div>
                <div class="scifi-select">
                  <Select style="width: 120px;" v-model:value="clickVolumeOrgId" placeholder="请选择组织"
                    @change="changeClickVolumeOrgId" class="custom-select" dropdownClassName="scifi-select-dropdown">
                    <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                      {{ org.label }}
                    </Select.Option>
                  </Select>
                </div>
              </div>
              <centerOne :chart-data="clickVolumeData" />
            </dv-border-box-8>
            <div style="width: 100%; height: 32%; margin:10px 0">
              <Row class="h-full w-full">
                <Col :span="9">
                <dv-border-box-8>
                  <div class="chart-header">
                    <div>组织开展活动</div>
                    <!-- <div class="scifi-select">
                      <Select style="width: 120px;" v-model:value="organizeActivitiesOrgId" placeholder="请选择组织"
                        @change="changeOrganizeActivitiesOrgId" class="custom-select"
                        dropdownClassName="scifi-select-dropdown">
                        <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                          {{ org.label }}
                        </Select.Option>
                      </Select>
                    </div> -->
                  </div>
                  <div class="flex flex-col items-center">
                    <div>
                      <dv-decoration-9 style="width: 90px; height: 90px">
                        {{ organizeActivitiesData?.activityCount || 0 }}
                      </dv-decoration-9>
                      <div>开展活动数量</div>
                    </div>
                    <div class="mt-4">
                      <dv-decoration-9 style="width: 90px; height: 90px">
                        {{ organizeActivitiesData?.activityParticipantCount || 0 }}
                      </dv-decoration-9>
                      <div>活动参与人数</div>
                    </div>
                  </div>
                </dv-border-box-8>
                </Col>
                <Col :span="15" style="padding-left: 12px">
                <dv-border-box-8>
                  <div class="chart-header">
                    <div>平台活动开展数据</div>
                  </div>
                  <centerTwo :chart-data="platformActivitiesData" />
                </dv-border-box-8>
                </Col>
              </Row>
            </div>
            </Col>

            <Col :span="7">
            <dv-border-box-8 style="height: 32%">
              <div class="chart-header">
                <div>政治面貌统计</div>
                <div class="scifi-select">
                  <Select style="width: 120px;" v-model:value="politicalStatusOrgId" placeholder="请选择组织"
                    @change="changePoliticalStatusOrgId" class="custom-select"
                    dropdownClassName="scifi-select-dropdown">
                    <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                      {{ org.label }}
                    </Select.Option>
                  </Select>
                </div>
              </div>
              <rightOne :chart-data="politicalStatusData" />
            </dv-border-box-8>
            <!-- 年龄性别统计 -->
            <dv-border-box-8 style="height: 66%; margin: 10px 0">
              <div class="chart-header">
                <div>年龄区间性别统计</div>
                <div class="scifi-select">
                  <Select style="width: 120px;" v-model:value="ageRangeOrgId" placeholder="请选择组织"
                    @change="changeAgeRangeOrgId" class="custom-select" dropdownClassName="scifi-select-dropdown">
                    <Select.Option v-for="org in orgList" :key="org.value" :value="org.value">
                      {{ org.label }}
                    </Select.Option>
                  </Select>
                </div>
              </div>
              <rightTwo :chart-data="ageRangeData" />
            </dv-border-box-8>
            </Col>
          </Row>
        </div>
      </div>
    </div>
  </Page>
</template>


<style lang="scss" scoped>
.chart-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  border-radius: 4px;
}


.chart-types {
  display: flex;
  gap: 20px;

  .chart-type-item {
    position: relative;
    padding: 8px 16px;
    overflow: hidden;
    font-size: 14px;
    color: rgb(0 242 254 / 70%);
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    transition: all 0.3s ease;

    &::before {
      position: absolute;
      top: 0;
      left: -100%;
      width: 100%;
      height: 2px;
      content: '';
      background: linear-gradient(90deg, transparent, rgb(0 242 254 / 80%));
      transition: 0.5s;
    }

    &:hover {
      color: rgb(0 242 254 / 100%);
      border-color: rgb(0 242 254 / 30%);
      box-shadow: 0 0 10px rgb(0 242 254 / 10%);

      &::before {
        left: 100%;
      }
    }

    &.active {
      color: #fff;
      background: linear-gradient(90deg,
          rgb(0 242 254 / 30%) 0%,
          rgb(0 242 254 / 10%) 100%);
      border-color: rgb(0 242 254 / 50%);
      box-shadow: 0 0 15px rgb(0 242 254 / 20%);
    }
  }
}

.map-container {
  width: 100%;
  height: 100%;
  padding: 0 !important;
  margin: 0 !important;
  background-color: black;

  #map-box {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1920px;
    height: 1080px;
    color: #d3d6dd;
    background-color: #ffebcd;
    transform: translate(-50%, -50%);
    transform-origin: left top;

    .bg {
      box-sizing: border-box;
      width: 100%;
      height: 100%;
      padding: 12px 12px 0;
      background-image: url('../../../assets/pageBg.png');
      background-position: center center;
      background-size: cover;
    }
  }
}

.header {
  position: relative;
  width: 100%;
  height: 50px;

  @keyframes move-left-to-right {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(calc(100vw - 106px));
    }
  }

  .move-line {
    position: absolute;
    bottom: -11px;
    left: 0;
    width: 106px;
    height: 28px;
    background: url('../../../assets/line-bg.png') no-repeat;
    background-size: 100% 100%;
    animation: move-left-to-right 4s linear infinite;
  }

  .header-title {
    min-width: 250px;
    margin: 0 50px;
    font-size: 20px;
    font-weight: 900;
    line-height: 2.8rem;
    color: transparent;
    text-align: center;
    letter-spacing: 4px;
    background-image: linear-gradient(92deg,
        #0072ff 0%,
        #00eaff 48.8525%,
        #01aaff 100%);
    background-clip: text;
  }

  .header-bg {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 0;
    width: 100%;
    height: 3.84rem;
    margin: 0 auto;
  }
}


/* 科幻风 Select 样式 */
.scifi-select ::v-deep(.ant-select-selector) {
  background: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
  border: 2px solid #00ffe7;
  color: #00ffe7;
  border-radius: 8px;
  transition: border 0.3s;
}

.scifi-select ::v-deep(.ant-select-selector:hover),
.scifi-select ::v-deep(.ant-select-focused .ant-select-selector) {
  border-color: #ff00cc;
}

.scifi-select ::v-deep(.ant-select-arrow) {
  color: #00ffe7;
}

.scifi-select ::v-deep(.ant-select-dropdown) {
  background: #181c2b;
  border: 1.5px solid #00ffe7;
  min-width: 80px !important;
  width: 80px !important;
}

.scifi-select ::v-deep(.ant-select-item-option-selected) {
  background: linear-gradient(90deg, #00ffe7 0%, #ff00cc 100%);
  color: #181c2b;
}

.scifi-select ::v-deep(.ant-select-item-option-active) {
  background: rgba(0, 255, 231, 0.2);
}
</style>

<style lang="scss">
/* 简洁的下拉菜单样式 */
.scifi-select-dropdown.ant-select-dropdown {
  background: rgba(24, 36, 58, 0.95) !important;
  border: 1px solid #00eaff !important;
  border-radius: 4px !important;
  padding: 4px 0;
  min-width: 90px;
  max-width: 120px;
}

.scifi-select-dropdown .ant-select-item {
  color: rgba(0, 234, 255, 0.85) !important;
  font-size: 12px;
  font-family: 'Microsoft YaHei';
  border-radius: 2px;
  margin: 1px 2px;
  padding: 2px 6px;
  background: transparent !important;
  transition: all 0.2s;
  min-height: 22px !important;
  line-height: 1.2;
}

.scifi-select-dropdown .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
  background: rgba(0, 114, 255, 0.1) !important;
  color: #fff !important;
}

.scifi-select-dropdown .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
  background: linear-gradient(90deg, #0072ff 0%, #00eaff 100%) !important;
  color: #fff !important;
  font-weight: 500;
}

.scifi-select-dropdown .ant-select-item-option-disabled {
  color: rgba(0, 234, 255, 0.3) !important;
  opacity: 0.6;
}

/* Select框本身的样式 */
.scifi-select ::v-deep(.ant-select-selector) {
  background: rgba(24, 36, 58, 0.8) !important;
  border: 1px solid #00eaff !important;
  border-radius: 4px !important;
  transition: all 0.3s;
  height: 28px !important;
  padding: 0 8px !important;
}

.scifi-select ::v-deep(.ant-select-selection-item) {
  color: rgba(0, 234, 255, 0.85) !important;
  font-size: 12px;
  line-height: 26px !important;
}

.scifi-select ::v-deep(.ant-select-arrow) {
  color: #00eaff;
  font-size: 12px;
}

.scifi-select ::v-deep(.ant-select-focused .ant-select-selector) {
  border-color: #00eaff !important;
}
</style>
